<template>
  <div class="container">
    <div class="row at-row no-gutter flex-center">
      <div class="col-md-22 maincontent">
        <div class="row at-row">
          <div class="guide">
            <at-menu active-name="home">
              <at-menu-item name="home" to="/HomePage">
                <i class="icon icon-home"></i>主页
              </at-menu-item>
              <at-menu-item name="introduction" to="/describe">
                <i class="icon icon-life-buoy"></i>会议室简介
              </at-menu-item>
              <at-submenu name="mymeeting">
                <template slot="title">
                  <i class="icon icon-bell"></i>我的会议
                </template>
                <at-menu-item name="calendar" to="/calendar">会议日程表</at-menu-item>
                <at-menu-item name="myreserve" to="/myreserve">我的预定</at-menu-item>
              </at-submenu>
              <at-menu-item name="meetingreserver" to="/reserve">
                <i class="icon icon-check-square"></i>会议室预定
              </at-menu-item>
              <at-menu-item name="analyse" to="/report">
                <i class="icon icon-bar-chart"></i>统计报表
              </at-menu-item>
              <at-submenu name="mine">
                <template slot="title">
                  <i class="icon icon-user"></i>我的
                </template>
                <at-menu-item name="myinfor" to="/MyInformation">个人资料</at-menu-item>
                <at-menu-item name="MeetingNote" to="/MeetingNote">会议记录</at-menu-item>
                <at-menu-item name="repair" to="/repair">在线报修</at-menu-item>
              </at-submenu>
            </at-menu>
          </div>
          <div class="contentview">
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {},
  methods: {}
};
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped lang="scss">
.container {
  width: 100%;
  background: #f9faff;
  .maincontent {
    width: 100%;
    background: white;
    .guide {
      margin: 30px 0;
      padding: 0 10px;
      border-right: 1px solid #e2ecf4;
    }
    .contentview {
      
      padding: 20px;
      flex: 1;
    }
  }
  .modal {
    .mymodalcontent {
      display: flex;
      img {
        flex: 1;
        width: 150px;
      }
      .logininput {
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px 0;
        .modaltitle {
          margin-bottom: 20px;
          font-size: 30px;
        }
        .inputitem {
          display: flex;
          align-items: center;
          width: 100%;
          justify-content: space-around;
          padding: 0 40px;
          i {
            margin-right: 10px;
            font-size: 20px;
          }
          .at-input {
            margin: 10px 0;
            flex: 1;
          }
        }
        .modalbuttons {
          margin-top: 30px;
        }
      }
    }
  }
}
</style>

<style>
.at-menu--inline .at-menu__item-link,
.at-menu__submenu-title {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.el-button--primary {
  color: #fff;
  background-color: #6190e8;
  border-color: #6190e8;
}
.el-dialog__body {
  margin: 0 !important;
  padding: 0 !important;
}
.el-dialog__footer,
.el-dialog__header {
  height: 0px !important;
  padding: 0 !important;
}
.el-dialog {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.4);
}
.at-menu--inline {
  border-right: 0 !important;
}
</style>